<template>
  <div class="tab_box">
    <el-form ref="form" label-width="80px" :model="seachformdata" size="mini">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="商品名">
            <el-input v-model="seachformdata.name" style="width:250px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类别">
            <el-select v-model="seachformdata.type" placeholder="请选择活动区域">
              <el-option v-for="v in parentsdata" :key="v.id" :label="v.name" :value="v.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"><el-form-item label="所属店铺">
          <el-input v-model="seachformdata.Belong" style="width:250px" />
        </el-form-item></el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-button size="mini" type="primary">+ 新建</el-button>
          <el-button size="mini" type="primary" @click="exportexcel(true)">导出全部</el-button>
          <el-button size="mini" type="primary" @click="exportexcel(false)">导出已选</el-button>
        </el-col>
        <el-col :span="8" />
        <el-col :span="8" :offset="8">
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-alert
      title="成功提示的文案"
      type="info"
      show-icon
      :closable="false"
    >
      <template #title>
        已选择 {{ selectdata.total }} 项   总价值：{{ selectdata.totalmoney }} 万
        <el-link :underline="false" type="primary" @click.prevent="clearselectdata">清空</el-link>

      </template>
    </el-alert>
    <el-table
      ref="multipleTable"
      :data="goodlistdata"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        reserve-selection
      />
      <el-table-column
        label="商品编号"
        prop="number"
        width="100"
        fixed
      />
      <el-table-column
        prop="name"
        label="商品名"
        fixed
      />
      <el-table-column
        prop="Belong"
        label="所属店铺"
      />
      <el-table-column
        prop="state"
        label="商品图"
        show-overflow-tooltip
      />
      <el-table-column
        prop="type"
        label="类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="costprice"
        label="成本价"
        show-overflow-tooltip
      />
      <el-table-column
        prop="originalprice"
        label="原价"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sellingprice"
        label="销售价"
        show-overflow-tooltip
      />
      <el-table-column
        prop="inventory"
        label="库存量"
        show-overflow-tooltip
      />
      <el-table-column
        prop="monthlysales"
        label="月销售量"
        show-overflow-tooltip
      />
      <el-table-column
        prop="totalsales"
        label="总销售量"
        show-overflow-tooltip
      />
      <el-table-column
        prop="monthlymoney"
        label="月销售额"
        show-overflow-tooltip
      />
      <el-table-column
        prop="totalmoney"
        label="总销售额"
        show-overflow-tooltip
      />
      <el-table-column
        prop="activities"
        label="参与活动"
      />
      <el-table-column
        prop="hotsell"
        label="是否热销"
        show-overflow-tooltip
      >
        <template #default="{row}">
          <el-tag size="mini">{{ row.hotsell | getstate }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="isrecommended"
        label="是否推荐"
        show-overflow-tooltip
      >
        <template #default="{row}">
          <el-tag size="mini">{{ row.isrecommended | getstate }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        show-overflow-tooltip
      >
        <template #default="{row}">
          <el-tag size="mini">{{ row.state | getgoodstate }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="380"
      >
        <template #default="{row}">
          <el-button
            size="mini"
          >上架
          </el-button>
          <el-button
            size="mini"
            type="danger"
          >删除
          </el-button>
          <el-button
            size="mini"
            @click="editgood(row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="detailgood(row)"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pagin._page"
      :page-sizes="[5, 10, 30, 35]"
      :page-size="pagin._limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <edit-good :onegooddata="onegooddata" :parentsdata="parentsdata" :dialogvisible="editdialogVisible" @shutdown="shutdownedit" @editdata="editdata" />
    <details-good :onegooddata="onegooddata" :dialogvisible="detailsdialogVisible" @shutdown="shutdowndetail" />
  </div>
</template>

<script>
import { getCommondityLists, pagindata } from '@/api/commodity.js';
import EditGood from './EditGood.vue';
import DetailsGood from './DetailsGood.vue';
import { exportExcel } from '@/utils/exportExcel.js';
export default {
  components: { EditGood, DetailsGood },
  data() {
    return {
      goodlistdata: [],
      goodtatollist: [],
      editdialogVisible: false,
      detailsdialogVisible: false,
      onegooddata: {},
      parentsdata: [],
      pagin: {
        _page: 1,
        _limit: 5,
      },
      total: 100,
      selectdata: {
        total: 0,
        totalmoney: 0,
      },
      selectdatalist: [],
      seachformdata: {
        name: '',
        type: '',
        Belong: '',
      },
    };
  },
  created() {
    this.getgoodlist();
  },
  methods: {
    exportexcel(val) {
      const map = {
        number: '商品编号',
        name: '商品名',
        Belong: '所属店铺',
        type: '商品类型',
        costprice: '成本价',
        originalprice: '原价',
        sellingprice: '销售价',
        inventory: '库存量',
        monthlysales: '月销售量',
        totalsales: '总销售量',
        monthlymoney: '月销售额',
        activities: '参与活动',
        hotsell: '是否热销',
        isrecommended: '是否推荐',
        state: '状态',
      };
      const datas = val ? JSON.parse(JSON.stringify(this.goodtatollist)) : JSON.parse(JSON.stringify(this.selectdatalist));
      if (datas.length === 0) {
        return this.$message.error('没有可导出的数据');
      }
      datas.forEach(v => {
        v.hotsell = v.hotsell ? '是' : '否';
        v.isrecommended = v.isrecommended ? '是' : '否';
        v.state = v.state ? '未开始' : '已开始';
      });
      exportExcel('新佳宜商品数列表', map, datas);
    },
    clearselectdata() {
      this.$refs.multipleTable.clearSelection();
    },
    handleSelectionChange(val) {
      this.selectdata.total = val.length;
      this.selectdatalist = val;
      let money = 0;
      val.forEach(v => {
        money += v.totalmoney;
        return money;
      });
      this.selectdata.totalmoney = money;
      // console.log(money);
    },
    editgood(val) {
      this.onegooddata = val;
      this.editdialogVisible = true;
    },
    editdata() {
      // this.getgoodlist();
      this.editdialogVisible = false;
    },
    shutdownedit() {
      this.editdialogVisible = false;
    },
    detailgood(val) {
      this.onegooddata = val;
      this.detailsdialogVisible = true;
    },
    shutdowndetail() {
      this.detailsdialogVisible = false;
    },
    async getgoodlist() {
      const res = await getCommondityLists();
      const pain = await pagindata(this.pagin);
      this.goodlistdata = pain.data;
      this.goodtatollist = res.data;
      this.total = res.data.length;
      this.parentsdata = res.data.filter(v => v.pid === '');
    },
    async handleCurrentChange(val) {
      this.pagin._page = val;
      const res = await pagindata(this.pagin);
      this.goodlistdata = res.data;
    },
    async handleSizeChange(val) {
      this.pagin._limit = val;
      const res = await pagindata(this.pagin);
      this.goodlistdata = res.data;
    },
  },
};
</script>

<style lang="scss">
.tab_box{
  .el-alert{
    margin-top: 10px;
  }
}
</style>
